<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-if="headerShow" style="margin-top: 10px">
        <a-form size="small" :model="pageData" layout="inline">
          <CorporateSectorCascader
            :configCascader="configCascader"
            @changeCascader="changeCascader"
          />
        </a-form>
        <div>
          <Toolbar
            :items="['查询', '新增', '删除']"
            @add="addHandler"
            @del="deleteHandler"
            @select="selectHandler"
          >
          </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <template #pageTabel>
      <!-- <a-tabs   :justify="true" default-active-key="1">
          <a-tab-pane key="1" title="保养类型列表"> -->
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: 100%"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="tableDataList"
        :localeText="localeText"
        :columnDefs="tc"
      >
      </AgGridVuesCopys>
      <!-- </a-tab-pane>
        </a-tabs> -->
    </template>
    <paginationCopys
      :total="fySelet.total"
      show-total
      show-jumper
      show-page-size
      @change="PageSize"
      @page-size-change="change"
      style="justify-content: center"
    />

    <a-drawer
      style="z-index: 999"
      ok-text="保存"
      cancel-text="关闭"
      :drawer-style="{ zIndex: 9999 }"
      :mask-closable="false"
      :width="400"
      :ok-loading="pageData.pageLoading"
      :visible="showAdd"
      unmountOnClose
      @ok="addOk"
      @cancel="showAdd = false"
    >
      <template #title>
        {{ sideTitle }}
      </template>
      <div>
        <a-form ref="formRef" :model="dataForm">
          <CorporateSectorCascader
            ref="cascader"
            :configCascader="configCascader2"
            @changeCascader="changeCascader2"
          />
          <a-form-item
            label-col-flex="120px"
            label="吨布漏验目标"
            field="omissionTarget"
            :rules="[{ required: true, message: '吨布漏验目标值必填' }, { validator: isfixed2Num }]"
            :validate-trigger="['change', 'blur']"
          >
            <a-input-number class="bacClass" v-model="dataForm.omissionTarget" />
          </a-form-item>
          <a-form-item
            label-col-flex="120px"
            label="改色率目标值"
            field="changeColorTarget"
            :rules="[{ required: true, message: '改色率目标值必填' }, { validator: isfixed2Num }]"
            :validate-trigger="['change', 'blur']"
          >
            <a-input-number class="bacClass" v-model="dataForm.changeColorTarget" />
          </a-form-item>
          <a-form-item
            label-col-flex="120px"
            label="疵布率目标值"
            field="defectiveTarget"
            :rules="[{ required: true, message: '疵布率目标值必填' }, { validator: isfixed2Num }]"
            :validate-trigger="['change', 'blur']"
          >
            <a-input-number class="bacClass" v-model="dataForm.defectiveTarget" />
          </a-form-item>
        </a-form>
      </div>
    </a-drawer>
  </pageTabelLayout>
</template>

<script setup lang="ts">
  import { post, get } from '@/api/http'
  import { ref, reactive, onMounted, toRefs } from 'vue'
  import Toolbar from '@/components/Toolbar.vue'
  
  import { Message, Modal } from '@arco-design/web-vue'
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'
  import { localeText } from '@/api/aggridZw'
  const cascader: any = ref()

  const configCascader = ref<{}>({
    corporateWidth: '200px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'mini', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
  })
  const changeCascader = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    pageData.dropDownData = corporateId
  }

  const configCascader2 = ref<{}>({
    corporateWidth: '250px', //公司宽度
    corporateNameLabelWidth: '120px',
    corporateName: '公司',
    sectorWidth: '180px', //部门宽度
    corporateRquired: true, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'medium', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    sectorName: '选择部门', //部门label
    cascaderShow: 'sector', //配置部门不显示
  })
  const changeCascader2 = (data: any) => {
    const { corporateId, sectorId, sectorLabel, corporateLabel } = data
    dataForm.firmId = corporateId
    dataForm.firm = corporateLabel
  }
  const isfixed2Num = (value: string, cb: Function) => {
    return new Promise<void>((resolve) => {
      var isletter = /^\d+(\.\d{1,2})?$/.test(value)
      if (!isletter) {
        cb('最多两位小数且不能为负数！')
      }
      resolve()
    })
  }
  const headerShow = ref(true)

  const pageData: any = reactive({
    dropDownData: '',
    showAdd: false,
    sideTitle: '',
  })

  const { dropDownData, showAdd, sideTitle } = toRefs(pageData)

  const dataForm: any = reactive({
    omissionTarget: null,
    changeColorTarget: '',
    firmId: null,
    firm: '',
    defectiveTarget: '',
  })

  function selectList() {
    post({
      url: 'dict/zcBiReportTargetValue/getPage',
      data: {
        page: fySelet.page,
        size: fySelet.size,
        firmId: pageData.dropDownData || null,
      },
    }).then((res: any) => {
      gridOption.value.setRowData(res.data.list)
      fySelet.total = res.data.total
    })
  }

  const huiche = () => {}

  const selectHandler = () => {
    selectList()
  }

  const addHandler = () => {
    for (let i in dataForm) {
      dataForm[i] = ''
    }
    pageData.sideTitle = '新增目标值'
    pageData.showAdd = true
  }

  const deleteHandler = () => {
    if (gridOption.value.getSelectedRows().length === 0) {
      return false
    }
    Modal.confirm({
      title: '系统提示',
      content: '确认删除选中的数据?',
      onOk() {
        post({
          url: 'dict/zcBiReportTargetValue/delete',
          data: gridOption.value.getSelectedRows().map((o: any) => {
            return o.id
          }),
        }).then(({ code, data }: any) => {
          if (code === 200) {
            Message.success({
              content: '删除成功',
              duration: 5000,
            })
            fySelet.page = 1
            selectList()
          } else {
            Message.error({
              content: '删除失败',
              duration: 5000,
            })
          }
        })
      },
    })
  }

  const tableDataList: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    flex: 1,
  }

  const fySelet: any = reactive({
    total: 10,
    size: 10,
    page: 1,
  })

  const PageSize = (val: any) => {
    fySelet.page = val
    selectList()
  }

  const change = (val: any) => {
    fySelet.size = val
    selectList()
  }

  const tc = [
    {
      showRowGroup: 'hide_def',
      headerName: '',
      checkboxSelection: true,
      headerCheckboxSelection: true,
      pinned: 'left',
      width: 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: 'left',
    },
    {
      headerName: '公司',
      field: 'firm',
      // pinned: o['fixed'],
      width: 150,
    },
    {
      headerName: '吨布漏验目标',
      field: 'omissionTarget',
      width: 150,
    },
    {
      headerName: '改色率目标值',
      field: 'changeColorTarget',
      width: 150,
    },
    {
      headerName: '疵布率目标值',
      field: 'defectiveTarget',
      width: 150,
    },
    {
      headerName: '操作',
      field: 'slot',
      pinned: 'right',
      width: 120,
      cellRenderer: {
        template: `
            <a-space>
                <a-tag class="tagCss" @click="a">修 改</a-tag>
            </a-space>
            `,
        setup(props: any) {
          const a = () => {
            updateList(props.params.data) // props.params.data
          }
          return {
            a,
          }
        },
      },
    },
  ]

  const formRef: any = ref()

  const addOk = () => {
    if (pageData.sideTitle == '新增目标值') {
      formRef.value?.validate().then((err: any) => {
        if (!err) {
          post({
            url: 'dict/zcBiReportTargetValue/saveOrUpdateById',
            data: dataForm,
          }).then((res: any) => {
            if (res.code == 200) {
              Message.success('成功')
              pageData.showAdd = false
              selectList()
            } else {
              Message.error(res.message)
            }
          })
        }
      })
    } else {
      formRef.value?.validate().then((err: any) => {
        if (!err) {
          post({
            url: 'dict/zcBiReportTargetValue/saveOrUpdateById',
            data: dataForm,
          }).then((res: any) => {
            if (res.code == 200) {
              Message.success('成功')
              pageData.showAdd = false
              selectList()
            } else {
              Message.error(res.message)
            }
          })
        }
      })
    }
  }

  const updateList = (e: any) => {
    for (let i in e) {
      dataForm[i] = e[i]
    }
    pageData.sideTitle = '修改目标值'
    pageData.showAdd = true
    nextTick(() => {
      cascader.value?.parentComponent({ corporateId: e.firmId, corporateLabel: e.firm })
    })
  }
</script>
<style scoped lang="less">
  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
</style>
